<table class="table table-bordered table-striped preview-tableview-table" ng-hide="showLoading" ng-controller="PreviewMultiStageTableViewController">
  <thead>
    <tr>
      <th class="from-stage" colspan="{{outputLimit ? outputLimit : 1}}">
        <select class="pull-left form-control input-sm" name="previewFromStage"
                ng-model="fromStage.selected"
                ng-options="stageInst.uiInfo.label for stageInst in pipelineConfig.stages | filter : filterSourceAndProcessors"
                ng-change="onFromStageChange()">
        </select>
      </th>

      <th class="to-stage" colspan="{{inputLimit ? inputLimit : 1}}">
        <select class="pull-left form-control input-sm" name="previewToStage"
                ng-model="toStage.selected"
                ng-options="stageInst.uiInfo.label for stageInst in toStageList"
                ng-change="onToStageChange()">
        </select>
      </th>

    </tr>


    <tr>

      <th class="from-stage" ng-repeat="fieldPath in outputFieldPaths | limitTo: outputLimit">
        <span>{{fieldPath}}</span>

        <div class="show-more pull-right" ng-if="$last && outputLimit < outputFieldPaths.length">
          (<a href="btn btn-link" href=""
              ng-click="onShowMoreOutputClick($event);">Show More...</a>

          <span class="separator">|</span>

          <a href="btn btn-link" href=""
             ng-click="onShowAllOutputClick($event);">Show All...</a>)
        </div>

      </th>


      <th class="to-stage" ng-repeat="fieldPath in inputFieldPaths | limitTo: inputLimit">
        <span>{{fieldPath}}</span>

        <div class="show-more pull-right" ng-if="$last && inputLimit < inputFieldPaths.length">
          (<a href="btn btn-link" href=""
              ng-click="onShowMoreInputClick($event);">Show More...</a>

          <span class="separator">|</span>

          <a href="btn btn-link" href=""
             ng-click="onShowAllInputClick($event);">Show All...</a>)
        </div>

      </th>

    </tr>


  </thead>

  <tbody>

  <tr ng-repeat-start="outputRecord in multiStagePreviewData.output"
      ng-init="
      inputRecords = getInputRecords(multiStagePreviewData.input, outputRecord);
      errorsRecords = getErrorRecords(multiStagePreviewData.errorRecords, outputRecord);
      flattenOutputRecord = getFlattenRecord(outputRecord);
      flattenInputRecord = getFlattenRecord(inputRecords[0])">



    <!--td ng-repeat="fieldPath in outputFieldPaths | limitTo: outputLimit"
        ng-class="{'value-deletion': (flattenOutputRecord[fieldPath].value !== flattenInputRecord[fieldPath].value) }"
        class="field-value {{flattenOutputRecord[fieldPath].type}}">{{flattenOutputRecord[fieldPath].value + ''}}</td-->



    <!--Input -->

    <td ng-repeat="fieldPath in outputFieldPaths | limitTo: outputLimit"
        ng-class="{'value-deletion': (flattenOutputRecord[fieldPath].value !== flattenInputRecord[fieldPath].value) }">

      <span class="pull-right glyphicon glyphicon-asterisk dirty-icon" ng-if="flattenOutputRecord[fieldPath].dirty"></span>

      <div ng-if="flattenOutputRecord[fieldPath].type === 'DATETIME' || flattenOutputRecord[fieldPath].type === 'DATE'" class="clearfix">

        <span class="field-value pull-left {{flattenOutputRecord[fieldPath].type}}"
              ng-class="{'value-deletion': (flattenOutputRecord[fieldPath].value !== flattenInputRecord[fieldPath].value) }"
          >{{flattenOutputRecord[fieldPath].value + '' | date:'medium'}} </span>

        <div class="dropdown pull-left" ng-show="previewMode"
             ng-init="dateRecordValue = flattenOutputRecord[fieldPath].value; dropdownSelector = 'dropdownSelector' + $parent.$index + $parent.$parent.$index">
          <a class="record-date-toggle dropdown-toggle {{dropdownSelector}}" role="button" data-toggle="dropdown" data-target="#" href="">
            <i class="fa fa-calendar"></i>
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <datetimepicker data-ng-model="dateRecordValue"
                            data-on-set-time="recordDateValueUpdated(outputRecord, flattenOutputRecord[fieldPath], dateRecordValue)"
                            data-datetimepicker-config="{ dropdownSelector: '.' + dropdownSelector }"></datetimepicker>
          </ul>
        </div>
      </div>


      <div ng-if="flattenOutputRecord[fieldPath].type !== 'DATETIME' && flattenOutputRecord[fieldPath].type !== 'DATE'"
           contenteditable="{{previewMode}}"
           ng-model="flattenOutputRecord[fieldPath].value"
           ng-change="recordValueUpdated(outputRecord, flattenOutputRecord[fieldPath])"
           class="field-value {{flattenOutputRecord[fieldPath].type}}">
      </div>

    </td>






    <!--td ng-if="flattenInputRecord"
        ng-repeat="fieldPath in inputFieldPaths | limitTo: inputLimit"
        ng-class="{'value-addition': flattenInputRecord[fieldPath].value !== flattenOutputRecord[fieldPath].value }"
        class="field-value {{flattenInputRecord[fieldPath].type}}">{{flattenInputRecord[fieldPath].value + ''}}</td-->




    <!--Output -->

    <td ng-if="flattenInputRecord"
        ng-repeat="fieldPath in inputFieldPaths | limitTo: inputLimit"
        ng-class="{'value-addition': flattenInputRecord[fieldPath].value !== flattenOutputRecord[fieldPath].value }"
        class="field-value {{flattenInputRecord[fieldPath].type}}"
      >{{(flattenInputRecord[fieldPath].type === 'DATETIME' || flattenInputRecord[fieldPath].type === 'DATE') ? (flattenInputRecord[fieldPath].value + '' | date:'medium') : (flattenInputRecord[fieldPath].value + '')}}</td>




    <td colspan="{{inputLimit ? inputLimit : 1}}"
        ng-if="inputRecords.length === 0">
      <label class="label label-warning">{{'home.previewPane.noOutputWarning' | translate}}</label>
    </td>

  </tr>

  <tr ng-repeat-end
      ng-repeat="inputRecord in inputRecords"
      ng-if="$index > 0"
      ng-init="flattenRecord = getFlattenRecord(inputRecord)">
    <td colspan="{{outputLimit ? outputLimit : 1}}"></td>

    <td ng-repeat="fieldPath in inputFieldPaths | limitTo: inputLimit"
        class="field-value {{flattenRecord[fieldPath].type}}"
      >{{(flattenRecord[fieldPath].type === 'DATETIME' || flattenRecord[fieldPath].type === 'DATE') ? (flattenRecord[fieldPath].value + '' | date:'medium') : (flattenRecord[fieldPath].value + '')}}</td>

  </tr>


  <tr ng-repeat="record in multiStagePreviewData.errorRecords">
    <td colspan="{{outputLimit ? outputLimit : 1}}">
      <label class="label label-danger">
        {{('global.form.record' | translate)+ '-' + ('global.form.errorRecord' | translate) + ' ' + record.header.errorMessage}}
      </label>
    </td>

    <td colspan="{{inputLimit ? inputLimit : 1}}"></td>
  </tr>



  <tr ng-if="multiStagePreviewData.input.length === 0 &&
                      multiStagePreviewData.output.length === 0 &&
                      multiStagePreviewData.errorRecords.length === 0">
    <td colspan="2" class="no-records" translate="home.previewPane.noRecords">No Records to view.</td>
  </tr>

  </tbody>

</table>